<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
//用ajax方法
            // $('input').click(function () {
            //     $.ajax({
            //         type:'POST',
            //         url: '25.test.php',
            //         data:{
            //             url:'baidu'
            //         },
            //         success:function(response){
            //             $('#box').html(response);//ajax request
            //         }
            //     });
            // });
//点击提交按钮 弹出abc
            // $('form input[type=button]').click(function () {
            //     alert("abc");
            //     $.ajax({
            //         type:'POST',
            //         url: '25.test.php',
            //         data:{
            //             url:'baidu'
            //         },
            //         success:function(response){
            //             $('#box').html(response);//ajax request
            //         }
            //     });
            // });
            // $('form input[type=button]').click(function () {
            //     $.ajax({
            //         type:'POST',
            //         url: '25.test.php',
            //         data:{
            //             user:$('form input[name=user]').val()
            //         },
            //         success:function(response){
            //             $('#box').html(response);//ajax request
            //         }
            //     });
            // });
//表单序列化
//             $('form input[type=button]').click(function () {
//                 $.ajax({
//                     type:'POST',
//                     url: '25.test.php',
// //表单中有很多内容 不需要一个一个传递 只需要调用serialize()方法 把表单的内容一次性的作为值传递后端服务器
//                     data:$('form').serialize(),//获得表单的内容
//                     success:function(response){
//                         $('#box').html(response);//ajax request
//                     }
//                 });
//                 alert($('form').serialize());
//             });
//把$(this).serialize()用decodeURIComponent解析出来
//             $('form input[name=sex]').click(function () {
//                 //把$(this).serialize()用decodeURIComponent解析出来
//                 $('#box').html(decodeURIComponent($(this).serialize()));
//             });
//以json的方式序列化
//             $('form input[name=sex]').click(function () {
//                 // alert($(this).serializeArray());//[object Object]
//                 var json=$(this).serializeArray();
//                 $('#box').html(json[0].name+":"+json[0].value);
//                //JSON格式
//                 // [
//                 //     {
//                 //         name:'sex',
//                 //         value:'女'
//                 //     }
//                 // ]
//             });
//解析表单内容  复杂表单用param
            $('form input[type=button]').click(function () {
                $.ajax({
                    type:'POST',
                    url: '25.test.php',
                    data:{
                        user:$('form input[name=user]').val()
                    },
                    success:function(response){
                        $('#box').html(response);//ajax request
                    }
                });
                alert($.param({
                    user:$('form input[name=user]').val()
                },))
            });
        });
    </script>
</head>
<body>
    <input type="button" value="发送请求">

    <form action="">
        用户名:<input type="text" name="user">
        <input type="button" value="提交">
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
    </form>
    <div id="box"></div>
<script>
    /*ajax({key:value})方法
    *   表单序列化
    *serialize()方法有转译功能 会把汉字或者特殊的符号转译编码 安全传输
    *   把$(this).serialize()用decodeURIComponent解析出来
    * serialize()可以序列化成{} 字符串的形式 序列化成json的格式
    * */
</script>
</body>
</html>